<template>
    <div style="width: 100%;">
        <div class="card">
            <BlogItem :msg="blogData.msg" :title="blogData.title" :date="blogData.date" :author="blogData.author"
                :avatar="blogData.avatar">
            </BlogItem>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import BlogItem from "@/components/BlogItem.vue";
import router from '@/router';
import blogUtils from "@/api/blog";

const blogData = ref({
    msg: "",
    title: "",
    date: "",
    author: "",
    avatar: ""
})

blogUtils.view(router.currentRoute.value.params.id as string).then(
    (data: any) => {
        console.log(data);
        blogData.value.msg = data.body.content;
        blogData.value.title = data.title;
        blogData.value.date = data.date;
        blogData.value.author = data.author.nickname;
        blogData.value.avatar = window.apiurl + "avatar/" + data.author.avatar;
    }
).catch((err) => {
    console.log(err);
});


</script>


<style scoped>
@media (max-width: 599px) {
    .card {
        width: calc(599px - 200px);
        max-width: 100%;
        margin: auto;
    }
}

/* 当视口宽度大于或等于600px时 */
@media (min-width: 600px) {
    .card {
        width: calc(100% - 200px);
        margin-left: 100px;
        margin-right: 100px;
    }
}

.card {
    margin-top: 1rem;
}
</style>